<template>
	<view class="indexPage">
		<view class="header">
			<view class="search" :style="'width:'+(left - 32)+'px; height:'+height+'px; margin-top:'+top+'px;'"
				@tap.stop="$openPage('/pagesNews/search')">
				&#xe651; 搜索</view>
			<view class="t1">南宁市民营经济投诉服务中心</view>
			<view class="t2">Nanning Private Economy Complaint Service Center</view>
			<view class="btn">
				<text class="login">请登录</text>
				<text class="tourist">游客</text>
				<text class="arrow">&#xed1e;</text>
				<text class="binding">登录后绑定企业可正常使用投诉功能</text>
			</view>
		</view>

		<view class="nav">
			<view class="complaint">
				<text class="complaintT1">我要投诉</text>
				<text class="complaintT2">投诉、建议、表扬</text>
			</view>
			<view class="service">政策服务</view>
			<view class="home">民企之家</view>

			<view class="village">
				<text class="village1">万企兴村</text>
				<text class="village2">文字介绍文字介绍</text>
			</view>
		</view>


		<!-- 资讯公告 -->
		<view class="notice">
			<text class="noticeHeader">资讯公告</text>
			<text class="more">查看更多 &#xed1e;</text>
		</view>

		<!-- 公告内容部分 -->
		<view class="main">
			<view class="v" v-for="(v,k) of list" :key="k">
				<view class="content">{{v.content}}</view>
				<view class="browse">{{v.browse}}浏览</view>
				<view class="time">{{v.time}}</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	// 小程序胶囊的位置:图解(https://blog.csdn.net/qq_43853213/article/details/115444202)
	let { height = 32, left = 278, top = 26 } = uni.getMenuButtonBoundingClientRect()

	let list = [{
		browse: "725",
		content: "南宁市委统战部到良庆区调研侨务和海外统战工作",
		time: "2022年10月9日",
	}, {
		browse: "725",
		content: "南宁市委统战部到良庆区调研侨务和海外统战工作",
		time: "2022年10月9日",
	}, {
		browse: "725",
		content: "南宁市委统战部到良庆区调研侨务和海外统战工作",
		time: "2022年10月9日",
	}, {
		browse: "725",
		content: "南宁市委统战部到良庆区调研侨务和海外统战工作",
		time: "2022年10月9日",
	}]
</script>

<style lang="scss" scoped>
	.indexPage {
		min-height: inherit;
		display: flex;
		flex-direction: column;
		background-color: #f4f8fa;
	}

	.header {
		color: #fff;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(#2466e1, #3681fd);

		>.search {
			background-color: #5290f7;
			overflow: hidden;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			color: #606266;
			padding-left: 10px;
			font-family: "iconfont";
			color: #cbdffe;
			margin-left: 16px;
		}

		.t1 {
			text-align: center;
			margin-top: 27px;
			font-size: 24px;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
			background: linear-gradient(180deg, #FFFFFF 60%, #B8DBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.t2 {
			color: #c3d8fb;
			text-align: center;
			font-size: 10px;
		}

		.btn {
			margin: 20px 16px 16px;
			padding: 18px 16px;
			background: linear-gradient(180deg, #D9ECFF 0%, #F0F7FF 100%);
			border-radius: 8px;
			display: grid;
			grid-template-columns: 58px auto 24px;
			grid-template-rows: auto auto;
			gap: 10px 12px;
		}

		.login {
			font-size: 18px;
			color: #333333;
		}

		.tourist {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 18px;
			align-self: center;
			background: #2163E0;
			border-radius: 2px;
			font-size: 12px;
		}

		.arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "iconfont";
			color: #90949e;
		}

		.binding {
			grid-column: 1/-1;
			font-size: 14px;
			color: #90949E;
		}
	}



	// 述求填写,政策服务,法律服务--
	.nav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 52px 52px 100px;
		gap: 10px 16px;
		margin: 16px;

	}

	.complaint {
		grid-row: 1 / 3;
		background: transparent url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-18560b30-bc3f-4751-a8b2-f9a9c6aa8b25/2e5ff711-03f4-4fef-84a1-c6798183dcad.png") no-repeat scroll center;
		background-size: 100%;
		padding: 18px 0 0 16px;
		display: flex;
		flex-direction: column;
		border-radius: 4px;
		overflow: hidden;

		.complaintT1 {
			font-size: 18px;
			color: #66292D;
			text-shadow: 0px 2px 4px rgba(0, 38, 77, 0.08);
			margin-bottom: 8px;
		}

		.complaintT2 {
			font-size: 12px;
			color: #804044;
			text-shadow: 0px 2px 4px rgba(0, 38, 77, 0.08);
		}
	}


	// 万企兴村
	.village {
		border-radius: 8px;
		overflow: hidden;
		grid-column: 1/-1;
		background: #d9edfe url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-18560b30-bc3f-4751-a8b2-f9a9c6aa8b25/5d806781-3843-432c-8640-0b71f1a392c8.png") no-repeat scroll center;
		display: flex;
		flex-direction: column;
		padding: 24px 0 0 16px;

		.village1 {
			font-size: 21px;
			color: #003365;
			margin-bottom: 8px;
		}

		.village2 {
			font-size: 12px;
			color: #003365;
		}
	}

	.service,
	.home {
		padding: 18px 0 0 16px;
		font-size: 16px;
		text-shadow: 0px 2px 4px rgba(0, 38, 77, 0.08);
	}

	.service {
		color: #294766;
		background: transparent url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-18560b30-bc3f-4751-a8b2-f9a9c6aa8b25/638df5a2-d1ff-48e9-9700-eee21dc81cd5.png") no-repeat scroll center;
	}

	.home {
		color: #296666;
		background: transparent url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-18560b30-bc3f-4751-a8b2-f9a9c6aa8b25/359420df-98a4-4f40-b3c6-4a0f830fa991.png") no-repeat scroll center;
	}

	// 述求填写,政策服务,法律服务==

	.notice {
		margin: 0 16px;
		padding: 12px 17px;
		font-family: "iconfont";
		background: linear-gradient(180deg, #E6F2FF 0%, rgba(240, 249, 255, 0) 100%);
		border-radius: 8px 8px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.noticeHeader {
			font-size: 18px;
			color: #333333;
			line-height: 18px;
		}

		.more {
			font-size: 12px;
			color: #90949E;
		}
	}

	.main {
		margin: 0 16px 16px;
		padding: 0 16px 16px;
		background-color: #fff;
		border-radius: 0 0 8px 8px;
		overflow: hidden;
	}

	.v {
		border-bottom: 1px solid #E5E5E5;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
		gap: 10px;
		padding: 16px 0;
	}

	.content {
		font-size: 16px;
		color: #333;
		grid-column: 1/-1;
	}

	.browse,
	.time {
		font-size: 12px;
		color: #90949E;
	}

	.time {
		place-self: center end;
	}
</style>
